<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="template.xhtml">
	<ui:define name="content">
		<h:form id="form">

			<p:growl id="messages" showDetail="true" />

			<p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList"
				editable="true">

				<f:facet name="header">
            		In-Cell Editing
        		</f:facet>

				<p:ajax event="rowEdit" listener="#{tableBean.onEdit}"
					update=":form:messages" />
				<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}"
					update=":form:messages" />

				<p:column headerText="Model" style="width:30%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{car.name}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{car.name}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Year" style="width:20%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{car.description}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{car.description}" style="width:100%"
								label="Year" />
						</f:facet>
					</p:cellEditor>
				</p:column>


				<p:column style="width:6%">
					<p:rowEditor />
				</p:column>

			</p:dataTable>

		</h:form>
	</ui:define>
</ui:composition>
</html>